<template>
  <div class="coupons">
    <van-tabs v-model="active" swipeable @change="changeTab">
      <!-- 未使用的优惠券列表 -->
      <van-tab title="未使用">
        <div class="coupons-content" v-if="!unused">
          <van-icon name="coupon" style="font-size: .7rem;color: #ccc;" />
          <p>暂无优惠券</p>
          <van-button type="danger">前往领券中心</van-button>
        </div>
        <div class="unused-list" v-else>
          <div class="get-coupon-center">
            <img src="//pinduoduoimg.yangkeduo.com/coupons/v2/couponscentericon.png@1300w_1l_70Q_50sh.webp" alt="">
            <span class="tiile">领券中心</span>
            <van-icon class="icon" name="arrow" />
          </div>
          <div class="coupon-list">
            <div class="coupon-item" v-for="item in unused">
              <div class="detail">
                <div class="discount">
                  <div>￥<i>{{item.discount/100}}</i></div>
                  <p style="font-size: .13rem;" v-if="item.min_amount===item.discount">无门槛</p>
                  <p style="font-size: .13rem;" v-else>满{{item.min_amount/100}}可用</p>
                </div>
                <div class="info">
                  <p class="name">{{item.rules_desc}}</p>
                  <p class="time">2018.11.15-2018.11.17</p>
                </div>
                <img class="tag" src="//pinduoduoimg.yangkeduo.com/coupons/v2/tag_shortdated.png" alt="">
                <div class="button">
                  <van-button type="warning" size="small">立即使用</van-button>
                </div>
              </div>
              <div class="commodity-info-content">
                <img :src="item.thumb_url" alt="">
                <p>{{item.goods_name}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="coupons-list-wrapper">
          <div class="title">
            <i class="iconfont icon-jingxuanchanpin"></i>
            <span>推荐好券</span>
          </div>
          <coupons-list :couponsList="couponsList"></coupons-list>
        </div>
      </van-tab>
      <!-- 已使用的优惠券列表 -->
      <van-tab title="已使用">
        <div class="coupons-content">
          <van-icon name="coupon" style="font-size: .7rem;color: #ccc;" />
          <p>暂无优惠券</p>
          <van-button type="danger">前往领券中心</van-button>
          <span class="convertCoupon">
            <span>兑换优惠券</span>
            <img src="//pinduoduoimg.yangkeduo.com/coupons/v2/arrow-right.png@1300w_1l_70Q_50sh.webp">
          </span>
        </div>
      </van-tab>
      <!-- 已过期的优惠券列表 -->
      <van-tab title="已过期/失效">
        <div class="coupons-content" v-if="!overdue">
          <van-icon name="coupon" style="font-size: .7rem;color: #ccc;" />
          <p>暂无优惠券</p>
          <van-button type="danger">前往领券中心</van-button>
          <span class="convertCoupon">
            <span>兑换优惠券</span>
            <img src="//pinduoduoimg.yangkeduo.com/coupons/v2/arrow-right.png@1300w_1l_70Q_50sh.webp">
          </span>
        </div>
        <div class="unused-list" v-else>
          <div class="get-coupon-center">
            <img src="//pinduoduoimg.yangkeduo.com/coupons/v2/couponscentericon.png@1300w_1l_70Q_50sh.webp" alt="">
            <span class="tiile">领券中心</span>
            <van-icon class="icon" name="arrow" />
          </div>
          <div class="coupon-list">
            <div class="coupon-item" v-for="item in overdue">
              <div class="detail" style="color: rgb(210, 210, 210);">
                <div class="discount" style="color: rgb(210, 210, 210);">
                  <div>￥<i>{{item.discount/100}}</i></div>
                  <p style="font-size: .13rem; " v-if="item.min_amount===item.discount">无门槛</p>
                  <p style="font-size: .13rem; " v-else>满{{item.min_amount/100}}可用</p>
                </div>
                <div class="info">
                  <p class="name">{{item.rules_desc}}</p>
                  <p class="time" style="color: rgb(210, 210, 210);">2018.11.15-2018.11.17</p>
                </div>
                <img style="position: absolute; width: .61rem;height: .61rem; right:0;" src="//pinduoduoimg.yangkeduo.com/coupons/v2/mark_expired.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import couponsList from "../../../components/couponsList/couponsList";
import {
  getcouponsList,
  getunused,
  getoverdue
} from "../../../api/getDatas.js";
export default {
  components: {
    couponsList
  },
  data() {
    return {
      active: 0,
      unused: null,
      overdue: null,
      couponsList: []
    };
  },
  methods: {
    changeTab(index, title) {
      console.log(index + title);
    },
    initData() {
      getcouponsList().then(res => {
        this.couponsList = res.data.data.navbar_item_volist;
      });
      getunused().then(res => {
        this.unused = res.data.data.coupons;
      });
      getoverdue().then(res => {
        this.overdue = res.data.data.coupons;
      });
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.coupons-content {
  padding-top: 0.73rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.66rem;
  p {
    margin-top: 0.28rem;
    margin-bottom: 0.2rem;
    font-size: 0.16rem;
    color: #58595b;
  }
  .convertCoupon {
    margin-top: 0.2rem;
    display: inline-block;
    color: #9c9c9c;
    font-size: 0.12rem;
    line-height: 1;
    padding-left: 0.08rem;
    vertical-align: middle;
    display: flex;
    -webkit-box-orient: vertical;
    align-items: center;
    img {
      width: 0.05rem;
      margin-left: 0.03rem;
      height: 0.1rem;
    }
  }
}
.coupon-list {
  margin-bottom: 0.66rem;
}
.coupons-list-wrapper {
  color: #e02e24;
  .title {
    height: 0.34rem;
    color: #e02e24;
    font-size: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
      margin-right: 0.08rem;
      font-size: 0.2rem;
    }
  }
}
.get-coupon-center {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.1rem auto 0;
  width: 3.51rem;
  height: 0.54rem;
  border-radius: 0.04rem;
  line-height: 0.54rem;
  color: #151516;
  font-size: 0.15rem;
  background-color: #fff;
  img {
    width: 0.28rem;
    height: 0.28rem;
    margin: 0 0.1rem;
  }
  .icon {
    position: absolute;
    right: 0.1rem;
  }
}
.coupon-item {
  position: relative;
  margin: 0.1rem auto 0;
  width: 3.51rem;
  border-radius: 0.03rem;
  overflow: hidden;
  .detail {
    position: relative;
    width: 3.51rem;
    height: 1rem;
    text-align: center;
    background-color: white;
    background-size: contain;
    .discount {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      left: 0;
      bottom: 0;
      width: 1.01rem;
      height: 1rem;
      color: rgb(255, 171, 51);
      font-size: 0.2rem;
      i {
        font-size: 0.36rem;
      }
    }
    .info {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      left: 0.94rem;
      bottom: -0.01rem;
      width: 1.81rem;
      height: 1rem;
      text-align: left;
      .name {
        position: relative;
        max-width: 1.5rem;
        line-height: 0.25rem;
        font-size: 0.15rem;
        font-family: Helvetica;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .time {
        position: relative;
        margin-top: 0.02rem;
        color: #9c9c9c;
        font-size: 0.12rem;
      }
    }
    .button {
      position: absolute;
      right: 0.16rem;
      bottom: 0.35rem;
    }
    .tag {
      position: absolute;
      top: 0;
      left: 0;
      width: 0.43rem;
      height: 0.43rem;
    }
  }
  .commodity-info-content {
    padding: 0 0.06rem;
    height: 0.31rem;
    background-color: #ededed;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    img {
      height: 0.2rem;
      width: 0.2rem;
    }
    p {
      align-self: center;
      color: #9c9c9c;
      font-size: 13px;
      margin-left: 0.06rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>

